<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="auto" v-if="selectFieldList.length > 0">
      <el-form-item :label="item.nameZh" :prop="item.nameEn" v-for="(item,i) in selectFieldList">
        <component
          :is="item.fieldType"
          :pData="item"
          ref="queryComponentRef"
          @queryFormChangeVal="queryFormChangeVal">
        </component>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>

    </el-form>

    <el-row :gutter="10" class="mb8">

      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          :disabled="multiple"
          @click="handleAddIn"
          v-hasPermi="['system:dynamic:associate']"
        >批量加入
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="dynamicDataList" @selection-change="handleSelectionChange" ref="multipleTable">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column label="资源ID" align="center" prop="id"/>
      <el-table-column :label="item.nameZh" align="center" :prop="item.nameEn" v-for="(item,i) in showFieldList">
        <template #default="scope" v-if="item.dataTypeName == 'imgPath'">
          <el-image class="table-td-thumb" :src="imgPathBase+scope.row[item.nameEn]"
                    :preview-src-list="[imgPathBase+scope.row[item.nameEn]]">
          </el-image>
        </template>
        <template #default="scope" v-else-if="item.dataTypeName == 'selectSingle' || item.dataTypeName == 'selectMultiple'">
          {{scope.row[item.nameEn] | getDictLabel(item.dictType.dictDataList)}}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" prop="create_time"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" hidden>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleAddIn(scope.row)"
            v-hasPermi="['system:dynamic:associate']"
          >加入
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


  </div>
</template>

<script>
    import * as itemElement from "@/components/BaseControl/itemElement.js"
    import {
        listDynamic,
        selectField,
    } from "@/api/system/dynamic"

    import { associationAdd } from "@/api/system/objectProperty"

    import dialogDynamicOp from "./index";

    export default {
        name: "dynamicOpData",
        dicts: ['business_whether'],
        components: {
            ...itemElement,
        },
        props: {
            classesIdTarget: {
                type: Number,
                default: 0
            },
            sourceDataId: {
                type: String,
                default: '0'
            },
            objectPropertyId: {
                type: String,
                default: '0'
            }
        },
        data() {
            return {
                imgPathBase: process.env.VUE_APP_BASE_API,
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                // 导出遮罩层
                releaseLoading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 动态资源表格数据
                dynamicDataList: [],
                // 字段类型
                dataTypeOptions: [],
                // 字典选项
                dictOptions: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                //查询字段
                selectFieldList: [],
                //展示字段
                showFieldList: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    classesId: null,
                },
                defaultClassesId: null,
            };
        },
        filters: {
            getDictLabel: function(dictValue, dictDataList) {
                let filter = dictDataList.filter(x=>x.dictValue == dictValue);
                if(filter.length){
                    return filter[0]["dictLabel"]
                }
                return dictValue;
            }
        },
        computed: {},
        created() {
            this.init();
            this.getList();
        },
        methods: {
            init() {
                const classesId = this.classesIdTarget;
                this.queryParams.classesId = classesId;
                this.defaultClassesId = classesId;

                selectField(classesId).then(response => {
                    this.selectFieldList = response.data.searchField.map(item => {
                        return {
                            onclickName: 'queryFormChangeVal',
                            ...item
                        }
                    });
                });
            },
            queryFormChangeVal(msg) {
                Object.keys(msg).forEach(item => {
                    this.queryParams[item] = msg[item];
                })
            },
            /** 查询公共基础字段列表 */
            getList() {
                this.loading = true;
                listDynamic(this.queryParams).then(response => {
                    this.dynamicDataList = response.data.list;
                    this.total = response.data.total;
                    this.showFieldList = response.data.showField;
                    this.loading = false;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.$refs[`queryComponentRef`].forEach(item => {
                    item.clearZhi();
                });
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            handleAddIn(row) {
                console.log("handleAddIn")
                let idsArr = [];
                if (row.id) {
                    idsArr.push(row.id)
                }
                if (this.ids.length > 0) {
                    idsArr = idsArr.concat(this.ids);
                }
                if (idsArr.length > 0) {
                    const data = {
                        objectPropertyId: this.objectPropertyId,
                        sourceDataId: this.sourceDataId,
                        ids: idsArr
                    };
                    this.$modal.confirm('是否确认关联数据项？').then(() => {
                        return associationAdd(data)
                    }).then(response => {
                        this.$refs.multipleTable.clearSelection();
                        this.ids = [];
                        this.$emit('refreshTheListMethod');
                        this.$modal.msgSuccess("加入成功");
                        // this.$emit('closeSubpage');
                    }).catch(() => {
                    });
                } else {
                    this.$modal.msgWarning("请选择需要关联的数据项!");
                }
            },
        }
    };
</script>
<style>
  .el-form-item .el-select {
    width: 100%;
  }

  .el-form--label-top .el-form-item__label {
    padding: 0 !important;
  }

  .el-row {
    margin-bottom: 0px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .el-form--label-top .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0;
  }

  .col-lg-6 {
    float: left;
    width: 50%;
    padding: 0 10px;
  }

  .col-lg-6 .el-date-editor {
    width: 100%;
  }

  .col-md-12 {
    float: left;
    width: 100%;
    padding: 0 10px;
  }

  .el-dialog__body {
    overflow-y: auto;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
</style>
